import { Button, Radio , Col, Row, Statistic,Divider ,Select } from 'antd';
import { FormattedMessage, connect, formatMessage, Dispatch } from 'umi';
import React, { useState, useEffect} from 'react';
import ECharts from 'echarts-for-react';
import * as echarts from 'echarts';
const { Option } = Select;
import { GridContent } from '@ant-design/pro-layout';
import cloneDeep from 'lodash.clonedeep';

import styles from './style.less'






const Survey: React.FC = () => {

  const DEFAULT_OPTION  = {
    color: ["pink", "#5fb78b"],
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
  

    legend: {
      left:'right',
      itemWidth: 10,
      itemHeight:10,
      data: ['今日', '昨日'],
      itemStyle: {
        borderRadius:'10px',
      },
      textStyle: {
        color: "white"
      }
  },
    grid: {
      left: '30',
      right: '30',
      bottom: '30',
    },
    xAxis: {
        type: 'category',
        axisLine:{
          lineStyle:{
            color:"#fff",
          }
        },  
        boundaryGap: true,
        data: ['00:00', '00:45', '01:30', '02:15', '03:00', '03:45', '04:30', '05:15', '06:00', '06:45', '07:30', '08:15', '09:00',
        '09:45', '10:30', '11:15', '12:00', '12:45', '13:30', '14:15', '15:00', '15:45', '16:30', '17:15', '18:00', '18:45', '19:30', '20:15', '21:00', '21:45', '22:30', '23:15']
    },
    yAxis: {
        type: 'value',
        axisLine:{
          lineStyle:{
            color:"#fff",
          }
        },  
    },
    dataZoom: [
      {
          type: 'inside'
      }
  ],
    series: [
        {
            name: '昨日',
            type: 'line',
            stack: '总量',
            smooth: true,
            markPoint: {
              data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
              ]
            },   
            markLine: {
              data: [
                  {type: 'average', name: '平均值'}
              ], 
              label: {
                color: "#fff"
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
        },
        {
            name: '今日',
            type: 'line',
            stack: '总量',
            smooth: true,
            markPoint: {
              data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
              ]
           },  
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ], label: {
                  color: "#fff"
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
        
        }
      
    ]
};

var dataAxis = ['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09']
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 310];
  const QUSHI_OPTION = {
    title: {
    },
    xAxis: {
      axisLine:{
        lineStyle:{
          color:"#fff",
        }
      },  
      data: dataAxis,
      axisTick: {
            show: false
        }, axisTick: {
      alignWithLabel: true
    }
    },
    yAxis: {
      axisLine:{
        lineStyle:{
          color:"#fff",
        }
      },  
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    grid: {
      left: 40,
      right:50,
      bottom: 30,
    },
    series: [
        {
            type: 'bar',
            name:'负荷趋势',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            }, markPoint: {
              data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
              ]
           },   markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ], label: {
                  color: "#fff"
                }
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};

const [option, setOption] = useState(DEFAULT_OPTION);
const [qushiOption, setQushiOption] = useState(QUSHI_OPTION);
const [size,setSize] = useState<string>('1')

    function handleChange(value) {
      console.log(`selected ${value}`);
    }
    function onChange(value) {
      console.log(`selected ${value}`);
    }
    function handleSizeChange (e) {
      setSize(e.target.value )
      const newQushiData = cloneDeep(qushiOption); 
      if(e.target.value==1){
        newQushiData.xAxis.data=['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
    
      }else if(e.target.value==2){
        newQushiData.xAxis.data=['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'];
        newQushiData.series.data=[0,1, 2, 3, 4, 5,6, 0,1, 2, 3, 4, 5,6, '10', '11', '12', '13', '14', '15'];
    
      }else{
        newQushiData.xAxis.data=['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
      }
      setQushiOption(newQushiData);
     
      console.log(newQushiData);
      console.log(newQushiData.xAxis.max);
      console.log(`selected ${e.target.value}`);
   
    }
    
    function onBlur() {
      console.log('blur');
    }
    
    function onFocus() {
      console.log('focus');
    }
    
    function onSearch(val) {
      console.log('search:', val);
    }


    return (
      <GridContent>
      <React.Fragment>
        <Row gutter={24}  style={{ margin: 0}} >  
        <div  className={styles.inputBg} >
            <Select  bordered={false}  defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}}   >
               <Option value="">全部区域</Option>
                <Option value="week">区域1</Option>
                <Option value="month">区域2</Option>
                <Option value="quarter">区域3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部类型</Option>
                <Option value="week">类型1</Option>
                <Option value="month">类型2</Option>
                <Option value="quarter">类型3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false} style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部设备</Option>
                <Option value="week">设备1</Option>
                <Option value="month">设备2</Option>
                <Option value="quarter">设备3</Option>
            </Select>
          </div>
        </Row>
          <Divider dashed />
          <Row  gutter={[0,24]}>
            <Col xl={18} lg={18} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}  className={[styles.servuychart, styles.box].join(' ')} >
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>日用电平均负荷曲线</span></Row>
              <ECharts option={option} style={{ height: 300, width: '100%' }} />
            </Col>
            <Col xl={6} lg={6} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}  className={[styles.energyTR, styles.box].join(' ')} >
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>用电峰值</span></Row>
              <Row className={styles.content} >
                <Row  className={styles.energyBox}>
                  <Row className={styles.row1}>
                    70.1
                  </Row> 
                  <Row className={styles.row2}>
                     <p>2021-08-20 00:00</p>
                  </Row> 
                  <Row className={styles.xia}>
                    今日(kW)
                  </Row>
                </Row> 
                <Row className={[styles.energyBox, styles.yestodayBox].join(' ')}  >
                  <Row className={styles.row1}>
                    91.15
                  </Row> 
                  <Row className={styles.row2} >
                     <p>2021-08-20 00:00</p>
                  </Row> 
                  <Row className={[styles.xia, styles.yestodayBgColor].join(' ')}>
                    昨日(kW)
                  </Row>
                </Row> 
                <Row >
                </Row> 
              </Row> 
            </Col>
         
          </Row>
          <Row   gutter={[0,24]}>
            <Col xl={10} lg={10} md={24} sm={24} xs={24}  >
              <div  className={ styles.box}  style={{marginRight:15,height:'100%'}}>
                <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>环比</span></Row>
                <Row gutter={24} style={{ margin:0,marginBottom:'7px'}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>721.6</p>
                      <p className={styles.bt}>今日用电(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>1047.92</p>
                      <p className={styles.bt}>昨日同期(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>-31.19%</p>
                        <p   className={styles.down}>-326.89kW.h</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                <Row gutter={24} style={{margin:0, marginBottom:'7px'}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>2508.25</p>
                      <p className={styles.bt}>当月用电(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>3508.32</p>
                      <p className={styles.bt}>上月同期(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>-31.19%</p>
                        <p   className={styles.down}>-326.89kW.h</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                <Row gutter={24}  style={{margin:0}}>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem}>
                      <p className={styles.number}>1267.19</p>
                      <p className={styles.bt}>今日用电(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <p className={styles.number}>0.0</p>
                      <p className={styles.bt}>今日用电(kW·h)</p>
                  </Col>
                  <Col xl={8} lg={8} md={8} sm={8} xs={8} className={styles.huanbiitem} >
                      <div    className={styles.qushiTop}>
                        <p>+--</p>
                        <p   className={styles.down}>+1267.19kW.h</p>
                      </div>
                      <p className={styles.bt}>趋势</p>
                  </Col>
                </Row> 
                </div>
            </Col>
            <Col xl={14} lg={14} md={24} sm={24} xs={24} className={ styles.box}>
              <Row className={styles.sinTitle}><span className={styles.signLine}></span><span>负荷趋势</span></Row>
              <Row style={{justifyContent: 'flex-end'}}>
                <Radio.Group value={{size}}  onChange={handleSizeChange} className={styles.qushiShanxuan}>
                  <Radio.Button value="1" className={size=='1'?styles.btnSelected:''}>今日</Radio.Button>
                  <Radio.Button value="2"  className={size=='2'?styles.btnSelected:''}>本月</Radio.Button>
                  <Radio.Button value="3"  className={size=='3'?styles.btnSelected:''}>全年</Radio.Button>
                </Radio.Group>
              </Row>
              <ECharts option={qushiOption} style={{ height: 400, width: '100%' }} />
            </Col>
         
          </Row>
  
  
        </React.Fragment>
      </GridContent>
    );
};

export default Survey;